import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Card, Skeleton } from 'antd-v4';
import useMediaQuery from 'use-media-antd-query';
import { Line, PageHeaderSkeleton } from '../List';
var MediaQueryKeyEnum = {
  xs: 1,
  sm: 2,
  md: 3,
  lg: 3,
  xl: 3,
  xxl: 4
};

var DescriptionsLargeItemSkeleton = function DescriptionsLargeItemSkeleton(_ref) {
  var active = _ref.active;
  return _jsxs("div", {
    style: {
      marginTop: 32
    },
    children: [_jsx(Skeleton.Button, {
      active: active,
      size: "small",
      style: {
        width: 100,
        marginBottom: 16
      }
    }), _jsxs("div", {
      style: {
        width: '100%',
        justifyContent: 'space-between',
        display: 'flex'
      },
      children: [_jsxs("div", {
        style: {
          flex: 1,
          marginRight: 24,
          maxWidth: 300
        },
        children: [_jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              marginTop: 0
            }
          }
        }), _jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              marginTop: 8
            }
          }
        }), _jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              marginTop: 8
            }
          }
        })]
      }), _jsx("div", {
        style: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center'
        },
        children: _jsxs("div", {
          style: {
            maxWidth: 300,
            margin: 'auto'
          },
          children: [_jsx(Skeleton, {
            active: active,
            paragraph: false,
            title: {
              style: {
                marginTop: 0
              }
            }
          }), _jsx(Skeleton, {
            active: active,
            paragraph: false,
            title: {
              style: {
                marginTop: 8
              }
            }
          })]
        })
      })]
    })]
  });
};

var DescriptionsItemSkeleton = function DescriptionsItemSkeleton(_ref2) {
  var size = _ref2.size,
      active = _ref2.active;
  var colSize = useMediaQuery();
  var arraySize = size === undefined ? MediaQueryKeyEnum[colSize] || 3 : size;
  return _jsx("div", {
    style: {
      width: '100%',
      justifyContent: 'space-between',
      display: 'flex'
    },
    children: new Array(arraySize).fill(null).map(function (_, index) {
      return _jsxs("div", {
        style: {
          flex: 1,
          paddingLeft: index === 0 ? 0 : 24,
          paddingRight: index === arraySize - 1 ? 0 : 24
        },
        children: [_jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              marginTop: 0
            }
          }
        }), _jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              marginTop: 8
            }
          }
        }), _jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              marginTop: 8
            }
          }
        })]
      }, index);
    })
  });
};
/**
 * Table 的子项目骨架屏
 *
 * @param param0
 */


export var TableItemSkeleton = function TableItemSkeleton(_ref3) {
  var active = _ref3.active,
      _ref3$header = _ref3.header,
      header = _ref3$header === void 0 ? false : _ref3$header;
  var colSize = useMediaQuery();
  var arraySize = MediaQueryKeyEnum[colSize] || 3;
  return _jsxs(_Fragment, {
    children: [_jsxs("div", {
      style: {
        display: 'flex',
        background: header ? 'rgba(0,0,0,0.02)' : 'none',
        padding: '24px 8px'
      },
      children: [new Array(arraySize).fill(null).map(function (_, index) {
        return _jsx("div", {
          style: {
            flex: 1,
            paddingLeft: header && index === 0 ? 0 : 20,
            paddingRight: 32
          },
          children: _jsx(Skeleton, {
            active: active,
            paragraph: false,
            title: {
              style: {
                margin: 0,
                height: 24,
                width: header ? '75px' : '100%'
              }
            }
          })
        }, index);
      }), _jsx("div", {
        style: {
          flex: 3,
          paddingLeft: 32
        },
        children: _jsx(Skeleton, {
          active: active,
          paragraph: false,
          title: {
            style: {
              margin: 0,
              height: 24,
              width: header ? '75px' : '100%'
            }
          }
        })
      })]
    }), _jsx(Line, {
      padding: "0px 0px"
    })]
  });
};
/**
 * Table 骨架屏
 *
 * @param param0
 */

export var TableSkeleton = function TableSkeleton(_ref4) {
  var active = _ref4.active,
      _ref4$size = _ref4.size,
      size = _ref4$size === void 0 ? 4 : _ref4$size;
  return _jsxs(Card, {
    bordered: false,
    children: [_jsx(Skeleton.Button, {
      active: active,
      size: "small",
      style: {
        width: 100,
        marginBottom: 16
      }
    }), _jsx(TableItemSkeleton, {
      header: true,
      active: active
    }), new Array(size).fill(null).map(function (_, index) {
      return (// eslint-disable-next-line react/no-array-index-key
        _jsx(TableItemSkeleton, {
          active: active
        }, index)
      );
    }), _jsx("div", {
      style: {
        display: 'flex',
        justifyContent: 'flex-end',
        paddingTop: 16
      },
      children: _jsx(Skeleton, {
        active: active,
        paragraph: false,
        title: {
          style: {
            margin: 0,
            height: 32,
            float: 'right',
            maxWidth: '630px'
          }
        }
      })
    })]
  });
};
export var DescriptionsSkeleton = function DescriptionsSkeleton(_ref5) {
  var active = _ref5.active;
  return _jsxs(Card, {
    bordered: false,
    style: {
      borderTopRightRadius: 0,
      borderTopLeftRadius: 0
    },
    children: [_jsx(Skeleton.Button, {
      active: active,
      size: "small",
      style: {
        width: 100,
        marginBottom: 16
      }
    }), _jsx(DescriptionsItemSkeleton, {
      active: active
    }), _jsx(DescriptionsLargeItemSkeleton, {
      active: active
    })]
  });
};

var DescriptionsPageSkeleton = function DescriptionsPageSkeleton(_ref6) {
  var _ref6$active = _ref6.active,
      active = _ref6$active === void 0 ? true : _ref6$active,
      pageHeader = _ref6.pageHeader,
      list = _ref6.list;
  return _jsxs("div", {
    style: {
      width: '100%'
    },
    children: [pageHeader !== false && _jsx(PageHeaderSkeleton, {
      active: active
    }), _jsx(DescriptionsSkeleton, {
      active: active
    }), list !== false && _jsx(Line, {}), list !== false && _jsx(TableSkeleton, {
      active: active,
      size: list
    })]
  });
};

export default DescriptionsPageSkeleton;